<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简易图标生成器</title>
    <style>
      body {
        font-family: "PingFang SC", "Helvetica Neue", Arial, sans-serif;
        margin: 20px;
        line-height: 1.6;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
      }
      .instruction {
        background-color: #e8f4ff;
        padding: 15px;
        border-radius: 5px;
        margin: 20px 0;
      }
      .icon-container {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        margin: 30px 0;
      }
      .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      canvas {
        border-radius: 16px;
        box-shadow: 0 4px 10px rgba(60, 70, 81, 0.1);
        margin-bottom: 10px;
      }
      button {
        background-color: #a0b8cd;
        color: white;
        border: none;
        border-radius: 20px;
        padding: 8px 15px;
        font-size: 14px;
        cursor: pointer;
        margin-top: 5px;
      }
      button:hover {
        background-color: #8ba7bc;
      }
      h2 {
        color: #3c4651;
        margin-top: 40px;
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <h1>解压一刻应用 - 简易图标生成器</h1>

      <div class="instruction">
        <p>由于外部图片链接可能存在下载限制，这个页面会生成基本的占位图标。</p>
        <p>使用方法：</p>
        <ol>
          <li>点击"下载"按钮保存每个图标</li>
          <li>将图标保存到对应的位置</li>
        </ol>
      </div>

      <h2>应用图标</h2>
      <div class="icon-container">
        <div class="icon-item">
          <canvas id="appIconCanvas" width="200" height="200"></canvas>
          <h3>减压应用图标</h3>
          <button onclick="downloadIcon('appIconCanvas', 'app-icon.png')">
            下载
          </button>
        </div>

        <div class="icon-item">
          <canvas id="avatarCanvas" width="200" height="200"></canvas>
          <h3>用户头像</h3>
          <button onclick="downloadIcon('avatarCanvas', 'avatar.png')">
            下载
          </button>
        </div>

        <div class="icon-item">
          <canvas id="flappyCanvas" width="200" height="200"></canvas>
          <h3>像素小鸟</h3>
          <button onclick="downloadIcon('flappyCanvas', 'flappy-icon.png')">
            下载
          </button>
        </div>

        <div class="icon-item">
          <canvas id="knifeCanvas" width="200" height="200"></canvas>
          <h3>飞刀结界</h3>
          <button onclick="downloadIcon('knifeCanvas', 'knife-icon.png')">
            下载
          </button>
        </div>

        <div class="icon-item">
          <canvas id="bubbleCanvas" width="200" height="200"></canvas>
          <h3>拟物泡泡纸</h3>
          <button onclick="downloadIcon('bubbleCanvas', 'bubble-icon.png')">
            下载
          </button>
        </div>

        <div class="icon-item">
          <canvas id="sandCanvas" width="200" height="200"></canvas>
          <h3>动态沙画板</h3>
          <button onclick="downloadIcon('sandCanvas', 'sand-icon.png')">
            下载
          </button>
        </div>

        <div class="icon-item">
          <canvas id="snakeCanvas" width="200" height="200"></canvas>
          <h3>贪吃蛇</h3>
          <button onclick="downloadIcon('snakeCanvas', 'snake-icon.png')">
            下载
          </button>
        </div>

        <div class="icon-item">
          <canvas id="tetrisCanvas" width="200" height="200"></canvas>
          <h3>俄罗斯方块</h3>
          <button onclick="downloadIcon('tetrisCanvas', 'tetris-icon.png')">
            下载
          </button>
        </div>
      </div>
    </div>

    <script>
      // 生成应用图标
      function drawAppIcon() {
        const canvas = document.getElementById("appIconCanvas");
        const ctx = canvas.getContext("2d");

        // 清除画布
        ctx.clearRect(0, 0, 200, 200);

        // 像素画的基本单位大小
        const pixelSize = 10;

        // 颜色定义 - 温暖柔和的配色
        const colors = {
          background: "#fff6e9", // 温暖米色背景
          primary: "#e6b7b0", // 主色调(浅粉)
          secondary: "#f5e2b3", // 次要色调(浅黄)
          accent1: "#c5e0b4", // 强调色1(浅绿)
          accent2: "#a0b8cd", // 强调色2(浅蓝)
          dark: "#3c4651", // 深色(深灰蓝)
        };

        // 创建渐变背景
        const bgGradient = ctx.createLinearGradient(0, 0, 200, 200);
        bgGradient.addColorStop(0, colors.background);
        bgGradient.addColorStop(1, "#fff0de");
        ctx.fillStyle = bgGradient;
        ctx.fillRect(0, 0, 200, 200);

        // 绘制像素
        function drawPixel(x, y, color) {
          ctx.fillStyle = color;
          ctx.fillRect(x * pixelSize, y * pixelSize, pixelSize, pixelSize);
        }

        // 绘制像素心形图案
        function drawHeartPattern() {
          // 大爱心轮廓 - 中央
          const centerHeart = [
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0],
            [0, 0, 1, 2, 2, 1, 0, 0, 0, 0, 0, 0, 1, 2, 2, 1, 0, 0, 0, 0],
            [0, 1, 2, 2, 2, 2, 1, 0, 0, 0, 0, 1, 2, 2, 2, 2, 1, 0, 0, 0],
            [0, 1, 2, 2, 2, 2, 2, 1, 0, 0, 1, 2, 2, 2, 2, 2, 1, 0, 0, 0],
            [0, 1, 2, 2, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 2, 2, 1, 0, 0, 0],
            [0, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 0, 0, 0, 0],
            [0, 0, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 1, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 1, 2, 2, 2, 2, 2, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 1, 2, 2, 2, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 1, 2, 2, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 1, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
            [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
          ];

          // 绘制中央大爱心
          for (let y = 0; y < centerHeart.length; y++) {
            for (let x = 0; x < centerHeart[y].length; x++) {
              const code = centerHeart[y][x];
              if (code === 1) {
                drawPixel(x, y, colors.dark); // 轮廓
              } else if (code === 2) {
                drawPixel(x, y, colors.primary); // 填充
              }
            }
          }

          // 左上小爱心
          drawSmallHeart(3, 15, colors.accent1);

          // 右下小爱心
          drawSmallHeart(13, 15, colors.accent2);

          // 左下小爱心
          drawSmallHeart(5, 18, colors.secondary);

          // 右上小爱心
          drawSmallHeart(15, 3, colors.secondary);
        }

        // 绘制小爱心
        function drawSmallHeart(startX, startY, color) {
          const smallHeart = [
            [0, 1, 1, 0, 1, 1, 0],
            [1, 2, 2, 1, 2, 2, 1],
            [1, 2, 2, 2, 2, 2, 1],
            [0, 1, 2, 2, 2, 1, 0],
            [0, 0, 1, 2, 1, 0, 0],
            [0, 0, 0, 1, 0, 0, 0],
          ];

          for (let y = 0; y < smallHeart.length; y++) {
            for (let x = 0; x < smallHeart[y].length; x++) {
              const code = smallHeart[y][x];
              if (code === 1) {
                drawPixel(startX + x, startY + y, colors.dark); // 轮廓
              } else if (code === 2) {
                drawPixel(startX + x, startY + y, color); // 填充
              }
            }
          }
        }

        // 绘制像素文字 - "解忧铺"
        function drawPixelText() {
          // 在底部绘制像素文字
          const text = [
            [0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 0],
            [0, 1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 0],
            [0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 0, 0],
            [0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0],
          ];

          for (let y = 0; y < text.length; y++) {
            for (let x = 0; x < text[y].length; x++) {
              if (text[y][x] === 1) {
                drawPixel(x + 4, y + 16, colors.dark);
              }
            }
          }
        }

        // 执行绘制函数
        drawHeartPattern();
        drawPixelText();
      }

      // 生成头像
      function drawAvatar() {
        const canvas = document.getElementById("avatarCanvas");
        const ctx = canvas.getContext("2d");

        // 背景
        ctx.fillStyle = "#a0b8cd";
        ctx.fillRect(0, 0, 200, 200);

        // 脸
        ctx.fillStyle = "#f5f5f5";
        ctx.beginPath();
        ctx.arc(100, 100, 70, 0, Math.PI * 2);
        ctx.fill();

        // 眼睛
        ctx.fillStyle = "#3c4651";
        ctx.beginPath();
        ctx.arc(70, 85, 10, 0, Math.PI * 2);
        ctx.arc(130, 85, 10, 0, Math.PI * 2);
        ctx.fill();

        // 微笑
        ctx.beginPath();
        ctx.arc(100, 110, 40, 0.2, Math.PI - 0.2);
        ctx.lineWidth = 3;
        ctx.stroke();
      }

      // 生成像素小鸟
      function drawFlappyBird() {
        const canvas = document.getElementById("flappyCanvas");
        const ctx = canvas.getContext("2d");

        // 背景
        ctx.fillStyle = "#87CEEB";
        ctx.fillRect(0, 0, 200, 200);

        // 鸟身体
        ctx.fillStyle = "#FFD700";
        ctx.fillRect(70, 80, 60, 40);

        // 鸟头
        ctx.fillStyle = "#FFD700";
        ctx.fillRect(120, 70, 30, 30);

        // 鸟眼睛
        ctx.fillStyle = "#000000";
        ctx.fillRect(135, 75, 10, 10);

        // 鸟嘴
        ctx.fillStyle = "#FF6347";
        ctx.fillRect(150, 85, 20, 10);

        // 鸟翅膀
        ctx.fillStyle = "#FFA500";
        ctx.fillRect(80, 60, 30, 20);
      }

      // 生成飞刀
      function drawKnife() {
        const canvas = document.getElementById("knifeCanvas");
        const ctx = canvas.getContext("2d");

        // 背景
        ctx.fillStyle = "#e6b7b0";
        ctx.fillRect(0, 0, 200, 200);

        // 刀柄
        ctx.fillStyle = "#8B4513";
        ctx.fillRect(50, 80, 40, 40);

        // 刀身
        ctx.fillStyle = "#C0C0C0";
        ctx.beginPath();
        ctx.moveTo(90, 70);
        ctx.lineTo(150, 40);
        ctx.lineTo(150, 70);
        ctx.lineTo(150, 130);
        ctx.lineTo(150, 160);
        ctx.lineTo(90, 130);
        ctx.closePath();
        ctx.fill();

        // 刀刃高光
        ctx.strokeStyle = "#FFFFFF";
        ctx.lineWidth = 2;
        ctx.beginPath();
        ctx.moveTo(95, 75);
        ctx.lineTo(145, 50);
        ctx.stroke();
      }

      // 生成泡泡
      function drawBubble() {
        const canvas = document.getElementById("bubbleCanvas");
        const ctx = canvas.getContext("2d");

        // 背景
        ctx.fillStyle = "#d1e1c7";
        ctx.fillRect(0, 0, 200, 200);

        // 泡泡
        function drawBubble(x, y, radius) {
          ctx.beginPath();
          ctx.arc(x, y, radius, 0, Math.PI * 2);
          ctx.fillStyle = "rgba(173, 216, 230, 0.6)";
          ctx.fill();

          // 泡泡高光
          ctx.beginPath();
          ctx.arc(x - radius / 3, y - radius / 3, radius / 4, 0, Math.PI * 2);
          ctx.fillStyle = "rgba(255, 255, 255, 0.8)";
          ctx.fill();
        }

        // 绘制多个泡泡
        drawBubble(60, 60, 30);
        drawBubble(120, 90, 40);
        drawBubble(80, 140, 25);
        drawBubble(150, 40, 20);
        drawBubble(40, 110, 15);
      }

      // 生成沙画
      function drawSand() {
        const canvas = document.getElementById("sandCanvas");
        const ctx = canvas.getContext("2d");

        // 背景（天空）
        ctx.fillStyle = "#87CEEB";
        ctx.fillRect(0, 0, 200, 80);

        // 海水
        ctx.fillStyle = "#1E90FF";
        ctx.fillRect(0, 80, 200, 50);

        // 沙滩
        ctx.fillStyle = "#F5DEB3";
        ctx.fillRect(0, 130, 200, 70);

        // 太阳
        ctx.fillStyle = "#FFD700";
        ctx.beginPath();
        ctx.arc(160, 30, 20, 0, Math.PI * 2);
        ctx.fill();

        // 沙滩上的图案
        ctx.strokeStyle = "#8B4513";
        ctx.lineWidth = 2;

        // 画一些沙滩图案
        ctx.beginPath();
        ctx.moveTo(30, 150);
        ctx.bezierCurveTo(50, 140, 70, 160, 90, 150);
        ctx.stroke();

        ctx.beginPath();
        ctx.moveTo(110, 160);
        ctx.bezierCurveTo(130, 150, 150, 170, 170, 160);
        ctx.stroke();
      }

      // 生成贪吃蛇图标
      function drawSnake() {
        const canvas = document.getElementById("snakeCanvas");
        const ctx = canvas.getContext("2d");

        // 背景
        ctx.fillStyle = "#c5e0b4";
        ctx.fillRect(0, 0, 200, 200);

        // 蛇头 - 使用矩形
        ctx.fillStyle = "#4CAF50";
        ctx.fillRect(80, 80, 40, 40);

        // 蛇眼睛
        ctx.fillStyle = "#000000";
        ctx.fillRect(90, 90, 8, 8);
        ctx.fillRect(102, 90, 8, 8);

        // 蛇舌头
        ctx.fillStyle = "#FF6347";
        ctx.fillRect(98, 110, 4, 8);
        ctx.fillRect(102, 110, 4, 8);

        // 蛇身体 - 使用简单的矩形
        ctx.fillStyle = "#4CAF50";
        ctx.fillRect(120, 85, 20, 20);
        ctx.fillRect(140, 80, 20, 20);
        ctx.fillRect(160, 85, 20, 20);
        ctx.fillRect(160, 105, 20, 20);
        ctx.fillRect(140, 110, 20, 20);
        ctx.fillRect(120, 115, 20, 20);
        ctx.fillRect(100, 120, 20, 20);
        ctx.fillRect(80, 125, 20, 20);
        ctx.fillRect(60, 120, 20, 20);
        ctx.fillRect(40, 115, 20, 20);
        ctx.fillRect(20, 110, 20, 20);
        ctx.fillRect(20, 90, 20, 20);
        ctx.fillRect(40, 85, 20, 20);
        ctx.fillRect(60, 80, 20, 20);

        // 蛇尾 - 三角形
        ctx.fillStyle = "#4CAF50";
        ctx.beginPath();
        ctx.moveTo(20, 110);
        ctx.lineTo(10, 105);
        ctx.lineTo(10, 115);
        ctx.closePath();
        ctx.fill();

        // 食物 - 小方块
        ctx.fillStyle = "#FF6B6B";
        ctx.fillRect(170, 50, 15, 15);
        ctx.fillStyle = "#FFD700";
        ctx.fillRect(30, 60, 15, 15);
        ctx.fillStyle = "#FF6347";
        ctx.fillRect(150, 150, 15, 15);
      }

      // 生成俄罗斯方块图标
      function drawTetris() {
        const canvas = document.getElementById("tetrisCanvas");
        const ctx = canvas.getContext("2d");

        // 像素风格背景 - 纯色
        ctx.fillStyle = "#0f0f23";
        ctx.fillRect(0, 0, 200, 200);

        // 像素大小 - 更小的像素单位
        const pixelSize = 8;
        const startX = 20;
        const startY = 20;

        // 俄罗斯方块颜色 - 更鲜艳的像素风格
        const colors = {
          I: "#00ffff", // 青色
          J: "#0000ff", // 蓝色
          L: "#ff8000", // 橙色
          O: "#ffff00", // 黄色
          S: "#00ff00", // 绿色
          T: "#8000ff", // 紫色
          Z: "#ff0000", // 红色
        };

        // 绘制像素方块的函数
        function drawPixel(x, y, color) {
          const pixelX = startX + x * pixelSize;
          const pixelY = startY + y * pixelSize;

          // 纯色像素块，无渐变
          ctx.fillStyle = color;
          ctx.fillRect(pixelX, pixelY, pixelSize, pixelSize);
        }

        // 绘制I型方块（长条）- 4x1
        for (let i = 0; i < 4; i++) {
          drawPixel(3 + i, 2, colors.I);
        }

        // 绘制J型方块 - L形
        drawPixel(1, 5, colors.J);
        drawPixel(1, 6, colors.J);
        drawPixel(2, 6, colors.J);
        drawPixel(3, 6, colors.J);

        // 绘制L型方块 - 反L形
        drawPixel(6, 5, colors.L);
        drawPixel(7, 5, colors.L);
        drawPixel(8, 5, colors.L);
        drawPixel(8, 6, colors.L);

        // 绘制O型方块（正方形）- 2x2
        drawPixel(1, 8, colors.O);
        drawPixel(2, 8, colors.O);
        drawPixel(1, 9, colors.O);
        drawPixel(2, 9, colors.O);

        // 绘制S型方块
        drawPixel(5, 8, colors.S);
        drawPixel(6, 8, colors.S);
        drawPixel(6, 9, colors.S);
        drawPixel(7, 9, colors.S);

        // 绘制T型方块
        drawPixel(9, 8, colors.T);
        drawPixel(10, 8, colors.T);
        drawPixel(11, 8, colors.T);
        drawPixel(10, 9, colors.T);

        // 绘制Z型方块
        drawPixel(1, 12, colors.Z);
        drawPixel(2, 12, colors.Z);
        drawPixel(2, 13, colors.Z);
        drawPixel(3, 13, colors.Z);

        // 添加更多装饰性像素块，营造像素风格
        // 左上角装饰
        drawPixel(0, 0, colors.I);
        drawPixel(1, 0, colors.I);
        drawPixel(0, 1, colors.I);

        // 右上角装饰
        drawPixel(19, 0, colors.Z);
        drawPixel(18, 0, colors.Z);
        drawPixel(19, 1, colors.Z);

        // 左下角装饰
        drawPixel(0, 19, colors.L);
        drawPixel(1, 19, colors.L);
        drawPixel(0, 18, colors.L);

        // 右下角装饰
        drawPixel(19, 19, colors.J);
        drawPixel(18, 19, colors.J);
        drawPixel(19, 18, colors.J);

        // 添加一些散落的像素点，增加像素艺术感
        drawPixel(5, 1, colors.O);
        drawPixel(15, 1, colors.S);
        drawPixel(3, 15, colors.T);
        drawPixel(17, 15, colors.I);
        drawPixel(9, 3, colors.Z);
        drawPixel(11, 17, colors.L);
      }

      // 下载图标
      function downloadIcon(canvasId, filename) {
        const canvas = document.getElementById(canvasId);
        const link = document.createElement("a");
        link.download = filename;
        link.href = canvas.toDataURL("image/png");
        link.click();
      }

      // 页面加载时绘制所有图标
      window.onload = function () {
        drawAppIcon();
        drawAvatar();
        drawFlappyBird();
        drawKnife();
        drawBubble();
        drawSand();
        drawSnake();
        drawTetris();
      };
    </script>
  </body>
</html>
